<template>
  <a-date-picker
    valueFormat="YYYY"
    style="width: 200px; margin: 10px"
    v-model:value="year"
    @change="changeYear"
    picker="year"
    :bordered="true"
    placeholder="请选择年份"
  />
  <div class="md:flex">
    <template v-for="(item, index) in growCardList" :key="item.title">
      <Card
        size="small"
        :loading="loading"
        :title="item.title"
        class="md:w-1/4 w-full !md:mt-0 !mt-4"
        :class="[index + 1 < 4 && '!md:mr-10']"
        :canExpan="false"
      >
        <template #extra>
          <a-select @change="onChangeSelect(formState[index].select,index)" v-model:value="formState[index].select" size="small">
            <a-select-option value="01">1</a-select-option>
            <a-select-option value="02">2</a-select-option>
            <a-select-option value="03">3</a-select-option>
            <a-select-option value="04">4</a-select-option>
            <a-select-option value="05">5</a-select-option>
            <a-select-option value="06">6</a-select-option>
            <a-select-option value="07">7</a-select-option>
            <a-select-option value="08">8</a-select-option>
            <a-select-option value="09">9</a-select-option>
            <a-select-option :value="10">10</a-select-option>
            <a-select-option :value="11">11</a-select-option>
            <a-select-option :value="12">12</a-select-option> </a-select
          ><Tag :color="item.color">{{ item.action }}</Tag>
        </template>

        <div class="px-4 flex justify-between">
          <div style="display: flex; justify-content: space-between; flex-direction: column">
            <span class="text-xl"><CountTo :prefix="item.totalTxt" :startVal="1" :endVal="item?.total" /> 笔</span>
            <span class="text-l"><CountTo :prefix="item.valueTxt" :startVal="1" :endVal="item?.value" /> 笔</span>
            <span class="text-l"><CountTo :prefix="item.value2Txt" :startVal="1" :endVal="item?.value2" /> 笔</span>
          </div>
          <Icon :icon="item.icon" :size="40" style="margin-top: 40px" />
        </div>

        <div class="p-2 px-4 flex justify-end">
          <span>单月完成率：</span>
          <CountTo :startVal="1" :endVal="item.percent" decimals="2" />
          <span>%</span>
        </div>
      </Card>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { CountTo } from '/@/components/CountTo/index';
import { Icon } from '/@/components/Icon';
import { Tag, Card } from 'ant-design-vue';
import { growCardList } from '../data';
import {
  getProjectKanbanControllerOrder,
  getProjectKanbanControllerPreKanban,
  getPojProjectKanbanControllerScheduling,
  projectKanbanControllerZzKanban,
} from './../api';

const formState = reactive([{select: '07'},{select: '07'},{select: '07'},{select: '07'}]);
const year = ref('2023');

const getOrder = async (val,status) => {
  const res = await getProjectKanbanControllerOrder({ status, date: val });
  const { result } = res;
  growCardList[0].total = result.total;
  growCardList[0].value = result.scheduling;
  growCardList[0].percent = result.rate * 100;
  growCardList[0].value2 = result.sendOut;
};

const getPreKanban = async (val,status) => {
  const res = await getProjectKanbanControllerPreKanban({ status, date: val });
  const { result } = res;
  growCardList[3].total = result.total;
  growCardList[3].value = result.scheduling;
  growCardList[3].percent = result.rate * 100;
  growCardList[3].value2 = result.sendOut;
};

const getKanban = async (val,status) => {
  const res = await projectKanbanControllerZzKanban({ status, date: val });
  const { result } = res;
  growCardList[2].total = result.total;
  growCardList[2].value = result.scheduling;
  growCardList[2].percent = result.rate * 100;
  growCardList[2].value2 = result.sendOut;
};

const getScheduling = async (val,status) => {
  const res = await getPojProjectKanbanControllerScheduling({ status, date: val });
  const { result } = res;
  growCardList[1].total = result.total;
  growCardList[1].value = result.scheduling;
  growCardList[1].percent = result.rate * 100;
  growCardList[1].value2 = result.sendOut;
};
const changeYear = async (val) => {
  getOrder(val,1);
  getPreKanban(val,1)
  getKanban(val,1)
  getScheduling(val,1)
  formState.forEach(item => {
    item.select = ''
  })
};

const onChangeSelect = (val,index) => {
  if(index === 0){
    getOrder(year.value + '-' + val,2)
  } else if(index === 1){
    getScheduling(year.value + '-' + val,2)
  }else if(index === 2){
    getKanban(year.value + '-' + val,2)
  }else {
    getPreKanban(year.value + '-' + val,2)
    
  }
}

getOrder('2023-07',2);
getPreKanban('2023-07',2)
getKanban('2023-07',2)
getScheduling('2023-07',2)
defineProps({
  loading: {
    type: Boolean,
  },
});
</script>
